﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <!--<script src="../js/jquery.min.js"></script>-->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

    <script src="../js/base.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.min.js"></script>
    <script src="../js/signalr/dist/browser/signalr.min.js"></script>
    <script src="../js/scripts/welcome.js?v=21071401"></script>

    <!-- 先引入 Vue -->
    <!--<script src="../js/vue.min.js"></script>-->
    <!-- 引入组件库 -->
    <!--<script src="../js/element-ui-index.js"></script>-->
    <!-- 引入样式 -->
    <!--<link href="../css/element-ui-index.css" rel="stylesheet" />-->
    <!-- 生产环境版本，优化了尺寸和速度 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.14.0/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.14.0/lib/index.js"></script>
    <style>
        div .el-progress-bar__outer {
            background: #91cc75;
        }

        .driver {
            margin-top: 5px;
            margin-left: 5px;
            width: -webkit-calc(46% - 5px);
            width: -moz-calc(46% - 5px);
            width: calc(46% - 5px);
            float: left;
        }
        .box-card-height {
           height:200px;
        }
        .el-row {
            margin-bottom: 2px;
        }
        .el-card__body {
            padding: 10px;
        }
        .el-step__title {
            font-size: 10px;
            line-height: 20px;
        }
    </style>
</head>
<body style="background-color:white;">
    <div id="app">
        <div class="content" style="text-align: center; font-size: 13pt; height: 100%; clear:both;">
            <el-steps :active="2" align-center>
                <el-step title="Anno" icon="el-icon-medal-1" description="微服务引擎"></el-step>
                <el-step title="Viper" icon="el-icon-upload" description="微服务面板"></el-step>
                <el-step title="Develop" icon="el-icon-edit" description="开发"></el-step>
                <el-step title="Operations" icon="el-icon-s-platform" description="运维监控"></el-step>
            </el-steps>
            <!--<font color="green">您好，欢迎使用<a target="_blank" href="https://github.com/duyanming/viper">Viper</a>，祝您工作愉快！</font>-->
        </div>
        <div style="padding-top: 0px;">
            <div>
                <el-row type="flex">
                    <el-col :span="12">
                        <el-card class="box-card">
                            <div id="trace" class="box-card-height">

                            </div>

                        </el-card>
                    </el-col>
                    <el-col :span="12" style="margin-left: 10px">
                        <el-card class="box-card">
                            <div id="cpu" class="box-card-height">
                            </div>

                        </el-card>
                    </el-col>
                </el-row>

                <el-row type="flex">
                    <el-col :span="12">
                        <el-card class="box-card">
                            <div id="memory" class="box-card-height">

                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="12" style="margin-left: 10px">
                        <el-card class="box-card">
                            <div id="disk" class="box-card-height">
                                <div v-show="isShow" style="display: none;"><b>{{name}}磁盘使用率</b></div>
                                <div v-for="d,index in drives" class="driver">
                                    <el-progress v-show="d.total>0"
                                                 :text-inside="true"
                                                 :stroke-width="26"
                                                 :percentage="(((d.total-d.free)/d.total)*100).toFixed(2)">

                                    </el-progress>
                                    <div v-show="d.total>0" style="font-size: 8px; text-align: left; display: none;">{{d.name}} <b>{{d.free}}</b>GB可用, 共 <b>{{d.total}}</b>GB</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
        </div>

    </div>
</body>

</html>
